<template>
	<view class="houseDetail-content">
		<u-navbar :is-back="true" title="房源详情">
		</u-navbar>
		<view class="houseDetail-body">
			<view class="process-status" v-if="pageStatus == 1">
				<view class="status-box">
					<view class="box-left" v-if="houseType == 1">
						<image src="../../static/image/house2.png" mode=""></image>
						<view>未通过</view>
					</view>
					<view class="box-left" v-if="houseType == 0">
						<image src="../../static/image/house1.png" mode=""></image>
						<view>审核中</view>
					</view>
					<view class="box-left" v-if="houseType == 2">
						<image src="../../static/image/house4.png" mode=""></image>
						<view>展示中</view>
					</view>
					<view class="box-left" v-if="houseType == 3">
						<image src="../../static/image/house3.png" mode=""></image>
						<view>已下架</view>
					</view>
					<view class="box-right" v-if="houseType != 0">
						<u-button type="success" :custom-style="customStyle" shape="circle" size="mini" v-if="houseType == 3" @click='updownRoom'>继续展示</u-button>
						<u-button type="warning" :custom-style="customStyle" shape="circle" size="mini" v-if="houseType == 1" @click='gotoUpdate'>去修改</u-button>
						<u-button type="error" :custom-style="customStyle" shape="circle" size="mini"
							v-if="houseType == 1 || houseType == 3" @click="delRoom">删除</u-button>
						<u-button type="warning" :custom-style="customStyle" shape="circle" size="mini" v-if="houseType == 2"
							@click='updownRoom'>取消展示</u-button>
					</view>
				</view>
				<view class="status-tips" v-if="houseType == 1">
					未通过原因：内容不符合，虚假信息
				</view>
			</view>
			<u-swiper :list="swpierList" :border-radius="0" height="750" mode="rect"></u-swiper>
			<view class="house-detail">
				<view class="detail-top">
					<view class="detail-label">{{detailForm.category.name || '出租'}}</view>
					<view class="detail-tags" v-for="(item,index) in detailForm.biaoqian" :key="index">
						<view :class="item.className">{{item.name}}</view>
					</view>
				</view>
				<view class="detail-time">发布时间：{{detailForm.created_at || '无'}}</view>
				<view class="detail-price">租金：<text>{{detailForm.zujin || 0}}元</text></view>
				<view class="detail-dec">
					<view>户型：<text>{{detailForm.hux.name || '无'}}</text></view>
					<view>所在楼层：<text>{{detailForm.louceng || 0}}楼</text></view>
					<view>面积：<text>{{detailForm.mianji || 0}}㎡</text></view>
				</view>
				<view class="detail-address">
					<image src="../../static/image/address.png" mode=""></image>
					<view>{{detailForm.address || '无'}}</view>
				</view>
			</view>
			<view class="describe">
				<view class="describe-title">
					详情描述
				</view>
				<view v-html="detailForm.detail">
				</view>
			</view>
			<view class="owner-info" v-if="pageStatus == 1">
				<view>出租人姓名<text>{{detailForm.name || '无'}}</text></view>
				<view>出租人电话<text>{{detailForm.phone || '无'}}</text></view>
			</view>
		</view>
		<view class="fun-box" v-if="pageStatus == 0 && isLogin">
			<view class="box-item">
				<image class="head-image" src="../../static/tabbar/my.png" mode=""></image>
				<view>{{detailForm.phone}}</view>
			</view>
			<view class="box-item item1" @click.stop="callIt(detailForm.phone)">
				<image src="../../static/image/phone.png" mode=""></image>
				<button size="mini" hover-class="none">联系车主</button>
			</view>
			<view class="box-item item2">
				<image src="../../static/image/share.png" mode=""></image>
				<button size="mini" hover-class="none" open-type='share'>分享好友</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRoomDetail,
		updownRoom,
		delRoom
	} from "@/api/index.js"
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '爱房有车',
				path: '/pages/houseDetail/index?roomId=' + this.detailForm.id
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '爱房有车',
				path: '/pages/houseDetail/index?roomId=' + this.detailForm.id
			}
		},
		data() {
			return {
				isLogin:false,
				customStyle:{
					padding:'0 20rpx !important',
				},
				houseType: 0,
				pageStatus: 0,
				detailForm: {},
				swpierList: [
					'/static/image/banner.png',
					'/static/image/banner.png',
					'/static/image/banner.png'
				],
			}
		},
		onLoad(op) {
			this.isLogin = uni.getStorageSync('isLogin')
			this.pageStatus = op.pageStatus
			if (op.tabsCurrent) {
				this.houseType = op.tabsCurrent
			}
			this.getRoomDetail(op.roomId)
		},
		methods: {
			gotoUpdate(){
				uni.navigateTo({
					url:'/pages/releaseHouse/index?roomId=' + this.detailForm.id
				})
			},
			delRoom(){
				delRoom({
					id: this.detailForm.id
				}).then(res=>{
					uni.showToast({
						title: '删除成功！',
						duration: 800
					})
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/mine/index'
						})
					}, 1000)
				})
			},
			updownRoom() {
				updownRoom({
					id: this.detailForm.id
				}).then(res => {
					uni.showToast({
						title: '成功！',
						duration: 800
					})
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/mine/index'
						})
					}, 1000)
				})
			},
			getRoomDetail(id) {
				getRoomDetail(id).then(res => {
					let classArr = ['color1', 'color2', 'color3', 'color4']
					this.detailForm = res.data
					if (this.detailForm.biaoqian !== null) {
						let index = 0
						this.detailForm.biaoqian = this.detailForm.biaoqian.split(',').map((ele) => {
							const className = classArr[index]
							index++;
							(index == 4) && (index == 0);
							return {
								className,
								name: ele
							}
						})
					}
					this.swpierList = JSON.parse(res.data.images).map(ele => {
						return 'https://afyc.chitong.cn/uploads/' + ele
					})
				})
			},
			callIt(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	button {
		background-color: transparent;
		color: #fff;
		border: none;
		padding: 0 !important;
	}
	
	button::after {
		border: none;
	}
	.process-status {
		.status-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx;
			background-color: #4286F4;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.box-left {
				display: flex;
				align-items: center;
				color: #fff;

				>image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 15rpx;
				}

				>view {
					font-size: 32rpx;
					letter-spacing: 4rpx;
				}
			}

			.box-right {
				/deep/ .u-size-mini {
					margin-right: 15rpx;
				}
			}
		}

		.status-tips {
			background-color: #FEF4F4;
			padding: 20rpx 30rpx;
			color: #FF5151;
			font-size: 24rpx;
		}
	}

	.house-detail {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 350rpx;

		.detail-top {
			display: flex;

			.detail-label {
				color: #fff;
				background-color: #4286F4;
				font-size: 22rpx;
				margin-right: 20rpx;
				padding: 10rpx;
				border-radius: 8rpx;
			}

			.detail-tags {
				display: flex;
				font-size: 18rpx;
				align-items: flex-end;

				>view {
					margin-right: 5rpx;
					border-radius: 5rpx;
					padding: 0 5rpx;
					height: 30rpx;
				}

				.color1 {
					color: #35A6EE;
					border: 1rpx solid #35A6EE;
				}

				.color2 {
					color: #F0962A;
					border: 1rpx solid #F0962A;
				}

				.color3 {
					color: #1FBF8C;
					border: 1rpx solid #1FBF8C;
				}

				.color4 {
					color: #FF5D38;
					border: 1rpx solid #FF5D38;
				}
			}


		}

		.detail-time {
			font-size: 22rpx;
			color: #787878;
		}

		.detail-price {
			font-size: 26rpx;
			margin: 10rpx 0;

			>text {
				color: #FE3939;
				font-size: 36rpx;
			}
		}

		.detail-dec {
			display: flex;
			justify-content: space-between;
			padding: 15rpx 10rpx;
			background-color: #F6FAFE;
			border-radius: 8rpx;
			font-size: 24rpx;

			>view {
				color: #787878;

				>text {
					color: #333333;
				}
			}
		}

		.detail-address {
			display: flex;
			color: #666666;
			align-items: center;
			font-size: 22rpx;
			margin: 20rpx 0;

			>image {
				width: 17rpx;
				height: 22rpx;
				margin-right: 5rpx;
			}
		}
	}

	.describe {
		padding: 20rpx 20rpx 200rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;

		// margin-bottom: 200rpx;
		.describe-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.owner-info {
		margin-top: 20rpx;
		padding-bottom: 200rpx;

		>view {
			background-color: #fff;
			padding: 30rpx 20rpx;
		}

		>view:first-child {
			border-bottom: 1rpx solid #F6F8F9;
		}
	}

	.fun-box {
		position: fixed;
		bottom: 0%;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 10px 20px #d8d8d8;
		display: flex;
		padding: 20rpx;
		justify-content: space-around;

		.box-item {
			display: flex;
			align-items: center;

			>image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 5rpx;
			}

			.head-image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}

		.item1 {
			background-color: #FF5D38;
			padding: 20rpx;
			color: #fff;
			border-radius: 50rpx;
		}

		.item2 {
			background-color: #01C25D;
			padding: 20rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>